<!DOCTYPE html>
<html dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Simple Nested Navs</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <script src="/dist/ionic.js"></script>
  <script>

      class PageOne extends HTMLElement {
        connectedCallback() {
          this.innerHTML = `

            <ion-header>
              <ion-toolbar>
                <ion-buttons slot="start">
                  <ion-back-button></ion-back-button>
                </ion-buttons>
                <ion-title>Page One</ion-title>
              </ion-toolbar>
            </ion-header>
            <ion-content padding>
              <h1>Page One</h1>
              <ion-nav-push component="page-two">
                <ion-button class="next">Go to Page Two</ion-button>
              </ion-nav-push>
            </ion-content>
          `;
        }
      }

      class PageTwo extends HTMLElement {
        connectedCallback() {
          this.innerHTML = `
          <ion-nav root="page-two-section-one"></ion-nav>
          `;
        }
      }

      class PageTwoSectionOne extends HTMLElement {
        connectedCallback() {
          this.innerHTML = `

            <ion-header>
              <ion-toolbar>
                <ion-buttons slot="start">
                  <ion-back-button></ion-back-button>
                </ion-buttons>
                <ion-title>Page Two Section One</ion-title>
              </ion-toolbar>
            </ion-header>
            <ion-content padding>
              <h1>Page Two Section One</h1>
              <ion-nav-push component="page-two-section-two">
                <ion-button class="next">Go to Page Two Section Two</ion-button>
              </ion-nav-push>
              <div>
                <ion-button class="previous">Go Back</ion-button>
              </div>
            </ion-content>
          `;

          const button = this.querySelector('ion-button.previous');
          button.addEventListener('click', () => {
            const nav = this.closest('ion-nav');
            if (nav.parent) {
              nav.parent.pop();
            }
          });
        }
      }

      class PageTwoSectionTwo extends HTMLElement {
        connectedCallback() {
          this.innerHTML = `

            <ion-header>
              <ion-toolbar>
                <ion-buttons slot="start">
                  <ion-back-button></ion-back-button>
                </ion-buttons>
                <ion-title>Page Two Section Two</ion-title>
              </ion-toolbar>
            </ion-header>
            <ion-content padding>
              <h1>Page Two Section Two</h1>
              <ion-nav-push component="page-three">
                <ion-button class="next">Go to Page Three</ion-button>
              </ion-nav-push>
            </ion-content>
          `;
        }
      }

      class PageThree extends HTMLElement {
        connectedCallback() {
          this.innerHTML = `

            <ion-header>
              <ion-toolbar>
                <ion-buttons slot="start">
                  <ion-back-button></ion-back-button>
                </ion-buttons>
                <ion-title>Page Three</ion-title>
              </ion-toolbar>
            </ion-header>
            <ion-content padding>
              <h1>Page Three</h1>
              <ion-nav-pop>
                  <ion-button class="previous">Go Back</ion-button>
              </ion-nav-pop>
            </ion-content>
          `;
        }
      }

      customElements.define('page-one', PageOne);
      customElements.define('page-two', PageTwo);
      customElements.define('page-two-section-one', PageTwoSectionOne);
      customElements.define('page-two-section-two', PageTwoSectionTwo);
      customElements.define('page-three', PageThree);

    </script>
</head>
<body>
  <ion-app>
    <ion-nav root="page-one"></ion-nav>
  </ion-app>
</body>
</html>
